<template>
	<view class="wrapper commission">
		<view class="wrapper-box">
			<view class="top">
				<view class="top-left">
					<view class="top-left-name">
						<image class="top-left-icon" src="@/package-purse/static/images/icon.png" mode="widthFix"></image>
						佣金余额(元)
					</view>
					<view class="top-left-amount">{{ commissionBalance.toFixed(2) }}</view>
				</view>
				<view class="top-right" @click="handlWithdraw">
					<image class="top-right-btn" src="@/package-purse/static/images/withdraw.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-tabs">
				<u-subsection @change="changeType" :bold="true" activeColor="#333" inactiveColor="#666" :list="typeList" :current="currentType"></u-subsection>
			</view>
			<view class="" v-if="currentType === 0">
				<view class="main-search">
					<uni-datetime-picker v-model="datetimerange" @change="handleDateChange" type="daterange" rangeSeparator="至" />
					<u-subsection @change="sectionChange" activeColor="#999" inactiveColor="#999" :list="dataList" :current="current"></u-subsection>
				</view>
				<view class="main-list">
					<view class="main-list-item" v-for="item in list" :key="item.id">
						<BalanceCard :item="item" @hancleExpand="hancleExpand">
							<view slot="topContent" class="main-list-item-income">
								收入:
								<text>{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</text>
							</view>
							<!-- <view slot="num">{{ item.scene_text || '' }}</view> -->
							<view slot="boxInfo">
								<view class="box-info-item">
									<view class="box-info-item-label">好友昵称</view>
									<view class="box-info-item-value">{{ item.item.nickName }}</view>
								</view>
								<view class="box-info-item">
									<view class="box-info-item-label">商品名称</view>
									<view class="box-info-item-value">{{ item.item.product_name }}</view>
								</view>
								<view class="box-info-item">
									<view class="box-info-item-label">规格</view>
									<view class="box-info-item-value">{{ item.item.product_attr }}</view>
								</view>
								<view class="box-info-item">
									<view class="box-info-item-label">订单金额</view>
									<view class="box-info-item-value">{{ item.item.order_amount }}</view>
								</view>
							</view>
						</BalanceCard>
					</view>
				</view>
				<u-back-top :scroll-top="scrollTop"></u-back-top>
				<u-loadmore
					:status="loadStatus"
					:line="true"
					:loading-text="loadingText"
					:loadmore-text="loadmoreText"
					:nomore-text="nomoreText"
					:error-text="errorText"
					@click-error="retryLoad"
					v-if="list.length > 0"
				/>
				<u-empty marginTop="100" v-if="list.length <= 0" mode="list" text="暂无数据" />
			</view>
			<view class="withdrawalRecord" v-if="currentType === 1">
				<WithdrawalRecord class=""></WithdrawalRecord>
			</view>
		</view>
	</view>
</template>

<script>
import { getDateRangeByType } from '@/utils/common.js';
import BalanceCard from '@/package-purse/components/balanceCard/index.vue';
import { purse } from '@/api';
import createPageScrollLoadMixin from '@/mixins/pageScrollLoadMixin';
import WithdrawalRecord from './components/withdrawalRecord.vue';

export default {
	components: { BalanceCard, WithdrawalRecord },
	mixins: [
		createPageScrollLoadMixin(
			purse.commissionBalanceLog, // 请求函数
			{
				list_rows: 20,
				resFormat: 1,
				// 为每行数据添加额外属性
				processRow: (row, index) => {
					return {
						time: row.createtime,
						...row,
						// 添加自定义属性
						isExpand: false,
						fold: row.item ? true : false
					};
				}
			} // 配置项
		)
	],
	data() {
		return {
			commissionBalance: 0,
			datetimerange: [],
			dataList: [{ name: '本日' }, { name: '本周' }, { name: '本月' }],
			typeList: [{ name: '收支明细' }, { name: '提现记录' }],
			current: 0,
			currentType: 0
		};
	},
	onLoad() {
		this.sectionChange(this.current, false);
	},
	onShow() {
		this.getCommissionWallet();
	},
	methods: {
		// 获取钱包-佣金信息
		async getCommissionWallet() {
			const res = await purse.commissionWallet();
			this.commissionBalance = res.data.commission_balance || 0;
		},
		chageQueryParams() {
			this.queryParams = {
				start_date: this.datetimerange[0] || '',
				end_date: this.datetimerange[1] || ''
			};
		},
		// 日期范围修改时触发
		handleDateChange(e) {
			this.datetimerange = e;
			this.chageQueryParams();
		},
		sectionChange(index, inspection = true) {
			if (inspection) {
				if (index === this.current) return;
			}
			this.current = index;
			switch (this.current) {
				case 0:
					this.datetimerange = getDateRangeByType('today');
					break;
				case 1:
					this.datetimerange = getDateRangeByType('week');
					break;
				case 2:
					this.datetimerange = getDateRangeByType('month');
					break;
			}
			this.chageQueryParams();
		},
		changeType(index) {
			if (this.currentType === index) return;
			this.currentType = index;
			if (index === 0) {
				this.current = 0;
				this.sectionChange(this.current, false);
				this.refresh();
			}
		},
		hancleExpand(item) {
			const index = this.list.findIndex((v) => v.id === item.id);
			console.log(index);
			this.list[index].isExpand = !item.isExpand;
		},
		handlWithdraw() {
			uni.navigateTo({
				url: '/package-purse/withdraw/withdraw?type=' + 'commission'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.wrapper {
	padding: 0rpx 0rpx 52rpx 0rpx;
	&-box {
		padding: 20rpx 30rpx 0rpx;

		background-color: #fff;
	}
}

.top {
	padding: 0 0rpx;
	height: 195rpx;
	display: flex;
	justify-content: space-between;
	background-image: url('https://yundong-shop.oss-cn-shanghai.aliyuncs.com/20250914223706064ed4300.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	&-left {
		padding-top: 35rpx;
		padding-left: 36rpx;
		&-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
		&-name {
			display: flex;
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;
		}
		&-amount {
			margin-top: 40rpx;
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 48rpx;
			color: #ffffff;
		}
	}
	&-right {
		padding-top: 43rpx;
		padding-right: 50rpx;
		&-btn {
			width: 130rpx;
			height: 52rpx;
		}
	}
}
.main {
	margin-top: 0rpx;
	&-tabs {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding: 20rpx 0 20rpx 0;
		::v-deep .u-subsection {
			width: 324rpx !important;
			height: 61rpx !important;
			background: #f4f6f8;
			border-radius: 7rpx !important;
			position: relative;
			z-index: 1;
		}
		::v-deep .u-subsection__item__text {
			font-family: 'Source Han Sans CN' !important;
			// font-weight: 400 !important;
			font-size: 28rpx !important;
		}
		::v-deep .u-subsection__bar {
			background: #fff;
			border-radius: 7rpx;
		}
	}
	&-search {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 0 30rpx 30rpx;

		::v-deep .uni-date {
			width: 400rpx;
			height: 60rpx;
			background: #f4f6f8;
			border-radius: 8rpx;
			opacity: 0.99;
			position: relative;
			z-index: 2;
			flex: none;
		}
		::v-deep .uni-date .icon-calendar {
			display: none;
		}
		::v-deep .uni-date .uni-icons {
			display: none;
			// font-size: 28rpx !important;
		}
		::v-deep .uni-date-x--border {
			border: none;
		}
		::v-deep .uni-date-x {
			background-color: transparent;
			align-items: start;
		}
		::v-deep .uni-date__x-input {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			line-height: normal;
			height: 60rpx;
			justify-content: center;
		}
		::v-deep .range-separator {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			line-height: normal;
			height: 60rpx !important;
			justify-content: center !important;
		}
		::v-deep .u-subsection {
			width: 240rpx !important;
			height: 56rpx !important;
			// background: #ffffff !important;
			border-radius: 16rpx !important;
			opacity: 0.99 !important;
			position: relative !important;
			z-index: 1 !important;
		}

		::v-deep .u-subsection__item__text {
			font-family: 'PingFang SC' !important;
			font-weight: 400 !important;
			font-size: 24rpx !important;
			color: #999999 !important;
		}
		::v-deep .u-subsection__bar {
			background: #fff; 
			border-radius: 7rpx !important;
			opacity: 0.99 !important;
		}
	}
	&-list {
		margin-top: 20rpx;
		padding: 0 30rpx;
		&-item {
			margin-bottom: 20rpx;
			&-income {
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				text {
					margin-left: 6rpx;
					font-family: 'PingFang SC';
					font-weight: bold;
					font-size: 30rpx;
					color: #ff4603;
				}
			}
		}
		.box-info-item {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
}
.withdrawalRecord {
	::v-deep .uni-date {
		width: 400rpx;
		height: 60rpx;
		background: #f4f6f8;
		border-radius: 8rpx;
		opacity: 0.99;
		position: relative;
		z-index: 2;
		flex: none;
	}
	::v-deep .uni-date .icon-calendar {
		display: none;
	}
	::v-deep .uni-date .uni-icons {
		display: none;
		// font-size: 28rpx !important;
	}
	::v-deep .uni-date-x--border {
		border: none;
	}
	::v-deep .uni-date-x {
		background-color: transparent;
		align-items: start;
	}
	::v-deep .uni-date__x-input {
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
		line-height: normal;
		height: 60rpx;
		justify-content: center;
	}
	::v-deep .range-separator {
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
		line-height: normal !important;
		height: 60rpx !important;
		justify-content: center !important;
	}
	::v-deep .u-subsection {
		width: 240rpx !important;
		height: 56rpx !important;
		background: #ffffff;
		border-radius: 16rpx;
		opacity: 0.99;
		position: relative;
		z-index: 1;
	}

	::v-deep .u-subsection__item__text {
		font-family: 'PingFang SC' !important;
		font-weight: 400 !important;
		font-size: 24rpx !important;
		color: #999999 !important;
	}
	::v-deep .u-subsection__bar {
		background: #fff;
		border-radius: 7rpx;
		opacity: 0.99;
	}
}
</style>